import { Alert, Image, Tabs } from '@aws-amplify/ui-react';
import { Example, ExampleCode } from '@/components/Example';
import { InstallScripts } from '@/components/InstallScripts';
import { NextSteps } from './NextSteps';

Amplify UI Storage components use [Amplify Storage](https://docs.amplify.aws/react/build-a-backend/storage/) to allow your users to upload and interact with files stored in Amazon S3 with minimal boilerplate.

## Quick start

### Setup with Amplify Gen 2 Backend

Follow the steps in [this guide](https://docs.amplify.aws/react/build-a-backend/storage/set-up-storage/) to set up your Amplify Storage backend.

### Setup with Amplify Gen 1 Backend

To set up Amplify using the [Gen 1 CLI](https://docs.amplify.aws/gen1/react/start/getting-started/installation/), follow the steps below: 

First, update `@aws-amplify/cli` with [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)
if you're using a version before `6.4.0`:

<Tabs.Container defaultValue="npm">
<Tabs.List>
  <Tabs.Item value="npm">npm</Tabs.Item>
  <Tabs.Item value="yarn">yarn</Tabs.Item>
</Tabs.List>
<Tabs.Panel value="npm">

```shell
npm install -g @aws-amplify/cli@latest
```

</Tabs.Panel>
<Tabs.Panel title="yarn">

```shell
yarn global add @aws-amplify/cli@latest
```

</Tabs.Panel>
</Tabs.Container>


Now that you have the Amplify CLI installed, you can set up your Amplify project by running `amplify init` in your project's root directory. 

Then run `amplify add storage` and follow the prompts to add storage to your backend configuration.

<Alert role="none" variation="info" heading="Auth">
  The Amplify Storage category requires you have auth set up. When you run `amplify add storage` it will prompt you to add auth as well.
</Alert>

_If you have an existing backend, run `amplify pull` to sync your `aws-exports.js` with your cloud backend._

You should now have an `aws-exports.js` file in your `src/` directory with your latest backend configuration.

After setting up Amplify make sure to install the Amplify libraries.

<InstallScripts component="storage" />

#### Configuring Amplify for Storage UI Components
To use Storage UI components with Amplify, you'll need to call `Amplify.configure()` as shown below. 
<Example>
  <Image alt='cat' src='/cats/1.jpg' width="400px" height="400px" />
  <ExampleCode>
    ```tsx
    import { Amplify } from 'aws-amplify';
    import { StorageImage, FileUploader } from '@aws-amplify/ui-react-storage';
    import awsExports from './aws-exports';

    Amplify.configure(awsExports);

    export const App = () => {
      return (
        <>
          <StorageImage alt="sleepy-cat" path="public/cat.jpeg" />
          <FileUploader path="my_prefix/public" maxFileCount={3} />
        </>
      );
    };
    ```
  </ExampleCode>
</Example>

<NextSteps />